import {Button, Space} from 'antd';
import {useBearStoreSelector} from '@/store/slice1.ts';

function BearCounter() {
    const bears = useBearStoreSelector.use.bears();
    return <h1>{bears} around here ...</h1>;
}

function Controls() {
    const bears = useBearStoreSelector.use.bears();
    const increasePopulation = useBearStoreSelector.use.increment();
    const removeAllBears = useBearStoreSelector.use.removeAllBears();
    return (
        <Space size="large">
            <Button type="primary" onClick={increasePopulation}>
                one up
            </Button>
            {bears > 0 && (
                <Button type="primary" danger onClick={removeAllBears}>
                    clear
                </Button>
            )}
        </Space>
    );
}

const Page1 = () => {
    return (
        <>
            <BearCounter />
            <Controls />
        </>
    );
};
export default Page1;
